<template>
  <div class="radio-edit">
    <el-input
        type="textarea"
        autosize
        placeholder="请输入题目内容"
        v-model="title"
        @change="changeTitle">>
    </el-input>
    <el-checkbox v-model="checked" class="isness" @change="changeNess" style="margin-bottom: 10px">必答</el-checkbox>
    <el-checkbox v-model="isRandom" class="isness" @change="changeRandom" style="margin-bottom: 10px">选项乱序</el-checkbox>
    <br>
    <el-checkbox v-model="isShowCount" class="isness" @change="changeShowCount" style="margin-bottom: 10px">显示投票数</el-checkbox>
    <el-checkbox v-model="isShowPercent" class="isness" @change="changeShowPercent" style="margin-bottom: 10px">显示百分比</el-checkbox>
    <el-divider style="margin-top: 10px">选项</el-divider>


    <el-scrollbar max-height="500px" style="padding-right: 15px; ">
      <div v-for="(option, index) in options">
        <option-design
            :text="option.text"
            :description="option.description"
            :isDefault="option.isDefault"
            :index="index"
            @addOption="addOption(option)"
            @deleteOption="deleteOption(option)"
            @changeDefault="changeDefault(option)"
            @changeText="changeText"
            @changeDes="changeDes"
            @upmove="upmove"
            @downmove="downmove"
        >
        </option-design>
      </div>
      

    </el-scrollbar>
<!--    <el-affix :offset="100" target=".target" position="bottom">-->
      <div><el-button class="add-option" @click="addFinalOption">添加选项</el-button></div>
      <el-button class="finish-edit" @click="finish">完成编辑</el-button>
<!--    </el-affix>-->
    <div class="target">
    </div>
  </div>
</template>

<script>
import OptionDesign from '../OptionDesign.vue'
export default ({
  name:'RadioVoteEdit',
  components: {
    OptionDesign,
  },
  data(){
    return {
    }
  },
  props: {
    title: {
      type: String,
      default: '',
    },
    checked: {
      type: Boolean,
      default: true,
    },
    isRandom: {
      type: Boolean,
      default: false,
    },
    isShowCount: {
      type: Boolean,
      default: true
    },
    isShowPercent: {
      type: Boolean,
      default: true
    },
    options: {
      type: Array,
      default: [],
    }
  },
  methods: {
    changeTitle() {
      this.$emit('changeTitle',this.title)
    },

    changeNess() {
      this.$emit('changeNess', this.checked)
    },
    changeShowCount() {
      this.$emit('changeShowCount', this.isShowCount)
    },
    changeShowPercent() {
      this.$emit('changeShowPercent', this.isShowPercent)
    },
    changeRandom() {
      this.$emit('changeRandom', this.isRandom)
    },

    finish() {
      this.$emit('finish')
    },

    addOption(option) {
      this.$emit('addOption', this.options.indexOf(option))

    },

    addFinalOption() {
      this.$emit('addFinalOption')
    },

    error(message) {
      this.$notify.error({
        title: '错误',
        message: message,
      });
    },

    deleteOption(option) {
      if(this.options.length > 1)
        this.$emit('deleteOption', this.options.indexOf(option))
      else{
        this.error('选项不可少于一个')
      }
    },

    changeDefault(option) {
      this.$emit('changeDefault', this.options.indexOf(option))
    },

    changeText(data) {
      this.$emit('changeText', data)
    },

    changeDes(data) {
      this.$emit('changeDes', data)
    },

    upmove(index) {
      this.$emit('upmove', index)
    },

    downmove(index) {
      this.$emit('downmove', index)
    },
  }

})
</script>

<style scoped src='assets/css/editcss/chooseEdit.css'>
/* @import url('../css/chooseEdit.css'); */
</style>
